<!--  -->
<template>
  <div class='cityConfigArea'>
      <div>
          <span class="cityConfigArea_alertMess"><i class="red">*</i>城市-区域-板块</span>
          <Button class="cityConfigArea_alertMessButton" type="primary" @click=" areaAdd">新增</Button>
          <!-- <Button class="cityConfigArea_alertMessButton" type="success" @click="batchImport">批量导入</Button> -->
          <!-- <Button class="cityConfigArea_alertMessButton" type="info" @click="customSortModal = true">自定义排序</Button> -->
      </div>
      <Table ref="TableHeight" class="table" :max-height="onresizeHeight" :columns="columns1" :data="data1"></Table>
      <!-- 分页 -->
      <div class="pagePublicStyle" v-show="pageData.total > 0">
         <div class="totalCount">
             当前第 {{pageData.page}} 页， 
             当前第 {{(pageData.page-1)*pageData.rows+1}} 条到第 {{pageData.page*pageData.rows>pageData.total?pageData.total:pageData.page*pageData.rows}} 条，
             共 {{pageData.total}} 条
         </div>
        <Page :current="pageData.page" :total="pageData.total" :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun" @on-page-size-change="pageOnPageSizeChangeFun" show-elevator show-sizer />
      </div>
      <!--新增板块 -->
      <Modal v-model="checkMoudle" title="新增板块" footer-hide width="500px">
        <div>
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                <FormItem label="区域" prop="parentCode">
                   <Select v-model="formValidate.parentCode" placeholder="请选择" class="cityConfigArea_moudle_select">
                        <Option v-for="item in parentCodeList" :key="item.cityCode" :value="item.cityName">{{item.cityName}}</Option>
                    </Select>  
                </FormItem>
                <FormItem label="板块" prop="titleArray">
                    <div v-for="(item,index) in formValidate.cityPlateList" :key="index" class="cityConfigArea_moudle_inputList">
                       <Input type="text"  v-model="item.title" placeholder="请输入模块名字" class="cityConfigArea_moudle_select"></Input>
                       <Icon v-if= "index == 0" size="24" class="cityConfigArea_moudle_icon" color="#4fe669" @click="formValidate.cityPlateList.push({title:''})" type="md-add-circle"  />
                       <Icon v-else color="red" size="24" class="cityConfigArea_moudle_icon" type="md-close-circle" @click="formValidate.cityPlateList.splice(index,1)" />
                    </div>
                </FormItem>
                <FormItem class="cityList_moudle_footer">
                    <Button class="cityConfigArea_cancelButton" @click="checkMoudle = false">取消</Button>
                    <Button type="primary" @click="addAreaSubmit('formValidate')">确定</Button>
                </FormItem>
            </Form>
        </div>
      </Modal>
      <!--自定义排序 -->
      <Modal :width="600" v-model="customSortModal" title="自定义排序" :mask-closable='false' :footer-hide='true' @on-cancel="customSortModal = false">
       <div class="customSortStyle">
        <ul class="customSortHead">
          <li>
            <div>排序</div>
            <div>区域</div>
            <div>自定义</div>
          </li>
        </ul>
        <div class="noDataStyle" v-show="uploadList.length == 0">暂无数据</div>
        <ul class="customSortBody" v-show="uploadList.length > 0">
          <draggable v-model="uploadList" draggable="li" @end="onEnd">
            <li v-for="(item, index) in uploadList" :key='index'>
              <div>{{index+1}}</div>
              <div>{{item.title}}</div>
              <div><Button :disabled="index == 0 ? true : false" @click="moveUpFun(index)">上移</Button><Button :disabled="index+1 == uploadList.length ? true : false" @click="moveDownFun(index)">下移</Button></div>
            </li>
          </draggable>
        </ul>
        <div class="customSortFoot" v-show="uploadList.length > 0">
          <Button  @click="customSortModal = false">取消</Button>
          <Button type="primary" @click="handleSubmit" style="margin-left: 10px">确定</Button>
        </div>
       </div>
      </Modal>
       <!--编辑 -->
      <Modal :width="500" v-model="currentDateDetail" title="板块编辑" :mask-closable='false' :footer-hide='true' @on-cancel="customSortModal = false">
       <div>
            <Form ref="currentDate" :model="currentDate" :rules="ruleValidateDetail" :label-width="120">
                <FormItem label="板块" prop="streetName">
                    <Input type="text"  v-model="currentDate.streetName" placeholder="请输入模块名字" class="cityConfigArea_moudle_select"></Input>
                </FormItem>
                <FormItem class="cityList_moudle_footer">
                    <Button class="cityConfigArea_cancelButton" @click="currentDateDetail = false">取消</Button>
                    <Button type="primary" @click="editAreaSubmit('currentDate')">确定</Button>
                </FormItem>
            </Form>
        </div>
      </Modal>
      <!-- 删除弹出框 -->
      <!-- <Modal v-model="deleteModal" width="360">
        <div style="text-align:center">
            
        </div>
        <div slot="footer">
            <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button>
        </div>
    </Modal> -->
  <simple-importcity :modal-obj="importObj" :updateObj="updateObj" />
  </div>
</template>

<script>
import draggable from 'vuedraggable';
import simpleImportcity from "@/components/simple_importcity"
import {getAreaPages, getAreaUpdate, getAreaDelete, getAreaAdd} from '@/api/cityConfig'
import {getCityList} from '@/api/buildingCheckcenter'
export default {
components: {draggable, simpleImportcity},
data() {
 const ruleValidateCodeList = (rule, data, callback) =>{
    let flag = false;
    data.forEach(item=>{
        item.title && (flag = true)
    })
   if(!flag)return callback("请输入至少一个模块的名称")
   callback()
 }
 return {
   
   pageData: {
     total: 0,
     page: 1,
     rows: 10,
     pageSizeOpts: [10, 30, 40, 50]
    },
    formValidate:{
      parentCode:"",
      cityPlateList:[{title:''}]
    },
    ruleValidate:{
      parentCode: [ { required: true, message: '请选择区域', trigger: 'blur' }],
      cityPlateList: [ {validator:ruleValidateCodeList,trigger: 'blur' }]
    },
    parentCodeList:[],
    uploadList:[],
    onresizeHeight: 0,
    checkMoudle:false,
    columns1: [
            {
              title: '序号',
              align: 'center',
               render: (h, params) => {
                return h('div',params.row._index+1) 
              },
            },
            {
              title: '城市',
              key: 'cityName',
              align: 'center',
            },
            {
              title: '区域',
              key: 'parentName',
              align: 'center',
            },
            {
              title: '板块',
              key: 'streetName',
              align: 'center',
            },
            {
              title: '操作',
              key: 'address',
              fixed: 'right',
              width: 160,
              align: 'center',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'text',
                    },
                    style: {
                      color: '#02b0f0'
                    },
                    on: {
                      click: () => {
                        this.toEdit(params.row)
                      }
                    }
                  }, '编辑'),
                 h('Button', {
                    props: {
                      type: 'text',
                    },
                    style: {
                      color: '#02b0f0'
                    },
                    on: {
                      click: () => {
                        this.toDelete(params.row)
                      }
                    }
                  }, '删除')
               ]);
              },
            }
    ],
    data1: [],
    customSortModal:false,
    importObj:{
        modalShow: false,
        title: '城市-区域-板块'
    },
     updateObj: {
          grid_importfile: 'grid_importfile',
          appName: 'web_back',
          appVersion: '1.0',
          code: '',
          api: "",
    },
    code:"",
    currentDate:{},
    currentDateDetail:false,
    ruleValidateDetail:{
        streetName:[ { required: true, message: '请填写区域', trigger: 'blur' }]
    },
    deleteModal:false,
    city:'上海'
};
},
computed: {},
watch: {},
methods: {
  //获取类表
  getList(){
    this.code = this.$route.query.code;
    let {page, rows} = this.pageData;
    let params = {page, rows,cityId:this.$route.query.cityId};
    getAreaPages(params).then(res=>{
      this.data1 = res.list;
      this.pageData.total = res.total-0;
      console.log("区域列表",res)
    })
  },
  //点击新增
  areaAdd(){
   this.getAreacode(4,this.code,'parentCodeList')
   this.checkMoudle = true;
  },
  //增加域块
  addAreaSubmit(name){
      console.log(6666)
    this.$refs[name].validate((valid) =>{
      console.log(valid)
      if(valid){
         console.log("可以提交了");
         let params = {},
         {parentCode, cityPlateList} = this.formValidate;
         cityPlateList.map(item=>{
           item.areaName = parentCode;
           item.cityCode = this.code;
           item.cityName = this.$route.query.title
         });
         params.cityPlateList = cityPlateList;
         getAreaAdd(params).then(res=>{
           this.$Message.success("增加板块成功");

           console.log("提价成功")
            this.$refs[name].resetFields();
            this.formValidate.cityPlateList = [{title:''}];
            this.formValidate = Object.assign({}, this.formValidate);
            this.checkMoudle = false;
            this.getList()
         }).catch(err=>this.$Message.error(err))
        
      }
    })
  },
  //获取当前城市的区域
   getAreacode(level=2,num,name){
       console.log("发生了请求",num)
         if(level !=2 && !num)return;
         //层级(1:国 2:省 3:市 4:区)
         let params = {level,parentCode:num,rows:100}
         getCityList(params).then(res=>{
          this[name] = res.list
          console.log('获取列表城市',res)
         })  
    },
  //批量导入
  batchImport(){
     // Object.assign(this.$data.importObj, this.$options.data().importObj)
      this.importObj.modalShow = true
      this.updateObj.code = this.code
  },
  //自定义排序
  selfSort(){

  },
   // 上移
  moveUpFun (index) {
    if (index == 0) {
      return;
    }
    this.swapItems(this.uploadList, index, index - 1)
  },
  // 下移
  moveDownFun (index) {
    if (index == this.uploadList.length - 1) {
      return;
    }
    this.swapItems(this.uploadList, index, index + 1)
  },
  //拖拽
   onEnd(){
      
  },
  //排序确定
  handleSubmit () {
      let code = []
      this.uploadList.map((item, index) => {
        code.push({ code: item.code, sortField: index })
      })
     console.log(code);
     this.$Message.success('排序成功！');
     this.customSortModal = false;
     //重新拉取列表

    //   apiPost(Api.dosystem.updateAreaSortField, code).then((res) => {
    //     this.$Message.success('排序成功！');
    //     this.customSortModal = false
    //     this.getData();
    //   })
   },
   //点击编辑按钮
   toEdit(mess){
    console.log(mess);
     this.currentDate = mess;
     this.currentDateDetail = true;
   },
   //编辑确定
   editAreaSubmit(name){
     this.$refs[name].validate((valid) =>{
         if(valid){
           let {streetName,streetId} = this.currentDate
            getAreaUpdate({streetId,streetName}).then(res=>{
              this.$Message.success("修改成功");
               this.currentDateDetail = false;
            })
         }
     })
   },
   //取消提示
   toDelete(mess){
     this.$Modal.confirm({
        title:'删除',
        content:'你确认删除么？',
        closable:true,
        onOk:()=>{
           getAreaDelete({streetId:mess.streetId}).then(res=>{
             this.$Message.success("删除成功");
             this.getList()

           })
        },
        onCancel:()=>{} 
     })
   },
   // 分页 页码改变事件
  pageOnChangeFun(page) {
    this.pageData.page = page;
    this.getList();
  },
  // 分页 每页条数改变事件
  pageOnPageSizeChangeFun(page) {
    this.pageData.rows = page;
     this.pageData.page = 1;
    this.getList();
  },
 
},
created() {
  this.getList()
},
mounted() {

},
}
</script>
<style lang='scss' scoped>
 .cityConfigArea{
   &_alertMess{
     font-size: 16px;
     font-weight: 700;
     float: left;
     margin-top: 6px;
     .red{
      color: red;
     }
   }
   &_alertMessButton{
       margin: 0 8px 25px 8px;
   }
   &_moudle_select{
     width: 306px;
     margin-right: 10px;
   }
   &_moudle_inputList{
       margin-bottom: 10px;
   }
   &_moudle_icon{
     vertical-align: text-top;  
   }
   
   .pagePublicStyle{
    text-align: right;
    padding: 14px 0;
    margin-right: 30px;
  }
  .totalCount{
    float: left;
    line-height: 34px;
    padding-left: 20px;  
  }
 }
 .cityList_moudle_footer {
     /deep/.ivu-form-item-content{
      text-align: right;
      margin-right: 42px; 
    }
  
}
 .customSortStyle{
    text-align: left;
    .customSortHead, .customSortBody{
        li{
      display: flex;
      flex-direction: row;
      border-bottom: 1px solid #EEEEEE;
          div{
      flex: 1;
      text-align: center;
            button{
      margin: 0px 6px;
            }
          }
      div:first-child{
        flex: 0.4;
          }
        }
      }
    .customSortHead li{ padding-bottom: 10px;}
    .customSortBody li{ padding: 10px 0; line-height: 31px;}
    .customSortBody{
      max-height: 400px;
      overflow-y: auto;
      }
    .customSortFoot{
      padding-top: 14px;
      text-align: center;
    }
  }  
  .cityConfigArea_cancelButton{
      margin-right: 6px;
  }
</style>